// 简单的灯箱效果脚本
document.addEventListener('DOMContentLoaded', function() {
    // 创建灯箱元素
    const lightbox = document.createElement('div');
    lightbox.id = 'lightbox';
    lightbox.style.display = 'none';
    lightbox.style.position = 'fixed';
    lightbox.style.top = '0';
    lightbox.style.left = '0';
    lightbox.style.width = '100%';
    lightbox.style.height = '100%';
    lightbox.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    lightbox.style.zIndex = '1000';
    lightbox.style.display = 'none';
    lightbox.style.justifyContent = 'center';
    lightbox.style.alignItems = 'center';
    lightbox.style.cursor = 'pointer';
    
    // 创建提示文本
    const hint = document.createElement('div');
    hint.style.position = 'absolute';
    hint.style.bottom = '20px';
    hint.style.color = 'white';
    hint.style.fontSize = '14px';
    hint.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    hint.style.padding = '5px 10px';
    hint.style.borderRadius = '4px';
    hint.textContent = '点击关闭 | 滚轮缩放';
    
    // 创建图片元素
    const img = document.createElement('img');
    img.style.maxWidth = '90%';
    img.style.maxHeight = '90%';
    img.style.border = '3px solid white';
    img.style.borderRadius = '5px';
    img.style.boxShadow = '0 0 20px rgba(0, 0, 0, 0.5)';
    img.style.transition = 'transform 0.1s ease';
    img.style.objectFit = 'contain';
    img.style.imageRendering = '-webkit-optimize-contrast';
    img.style.imageRendering = 'crisp-edges';
    img.style.transform = 'translateZ(0)';
    img.style.backfaceVisibility = 'hidden';
    
    // 添加加载动画
    const loader = document.createElement('div');
    loader.style.border = '5px solid #f3f3f3';
    loader.style.borderTop = '5px solid #0066cc';
    loader.style.borderRadius = '50%';
    loader.style.width = '50px';
    loader.style.height = '50px';
    loader.style.animation = 'spin 1s linear infinite';
    loader.style.position = 'absolute';
    loader.style.display = 'none';
    
    // 添加加载动画的CSS
    const style = document.createElement('style');
    style.textContent = `
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    `;
    document.head.appendChild(style);
    
    // 添加灯箱、提示和图片到文档
    lightbox.appendChild(img);
    lightbox.appendChild(hint);
    lightbox.appendChild(loader);
    document.body.appendChild(lightbox);
    
    // 跟踪缩放状态
    let scale = 1;
    const minScale = 0.1;
    const maxScale = 5;
    const scaleStep = 0.1;
    
    // 为所有图片添加点击事件
    const images = document.querySelectorAll('.image-container img, img:not(.nav-container img)');
    images.forEach(image => {
        // 添加鼠标悬停效果和提示
        image.style.cursor = 'pointer';
        image.title = '点击查看大图';
        
        // 添加点击事件
        image.addEventListener('click', function() {
            lightbox.style.display = 'flex';
            loader.style.display = 'block';
            img.style.opacity = '0';
            
            // 设置src并处理加载完成事件
            img.onload = function() {
                loader.style.display = 'none';
                img.style.opacity = '1';
                // 添加淡入效果
                img.style.transition = 'opacity 0.3s ease';
            };
            
            img.src = this.src;
            
            // 重置缩放
            scale = 1;
            img.style.transform = `scale(${scale})`;
        });
    });
    
    // 添加滚轮事件监听
    lightbox.addEventListener('wheel', function(e) {
        e.preventDefault(); // 防止页面滚动
        
        // 确定缩放方向
        if (e.deltaY < 0) {
            // 向上滚动，放大
            scale += scaleStep;
        } else {
            // 向下滚动，缩小
            scale -= scaleStep;
        }
        
        // 限制缩放范围
        scale = Math.max(minScale, Math.min(maxScale, scale));
        
        // 应用缩放
        img.style.transform = `scale(${scale})`;
    });
    
    // 点击灯箱关闭（但不包括点击图片时）
    lightbox.addEventListener('click', function(e) {
        // 如果点击的是灯箱本身（而不是图片），则关闭
        if (e.target === lightbox) {
            this.style.display = 'none';
        }
    });
    
    // 阻止点击图片时关闭灯箱
    img.addEventListener('click', function(e) {
        e.stopPropagation();
    });
}); 